<template>
  <view class="vh_100">
    <view
      :class="['vh100', { dark: theme == 'dark' }]"
      style="overflow: scroll"
    >
      <!-- 语言选择 -->
      <!-- <view @click="funsItemClick(7)">

				  <view class="flex itemLeft">
				    <view class="size30" style="position: absolute;top: 10vw;right: 0;left: 80vw;color: #ffffff;">{{$t('bico.W518')}}</view>
				  </view>
				</view> -->

      <view class="pt30">
        <view class="tc">
          <view>
            <image
		      style="width: 172upx;height: 172upx"
              src="../../static/logo.png"
              mode="widthFix"
              class="wt80_100"
            ></image>
          </view>
        </view>

        <view class="wrap">
          <u-row gutter="16">
            <!-- <u-col span="3">
              <view class=""></view>
            </u-col> -->
            <!-- <u-col span="2">
              <view
                class="bg-purple"
                :class="{ blue2: loginActive == 0 }"
                @tap="loginActive = 0"
              >
                {{ $t('login').l_mobile }}
              </view>
            </u-col> -->
            <u-col>
              <view
                class="bg-purple"
                :class="{ blue2: loginActive == 1 }"
                @tap="loginActive = 1"
              >
                {{ $t('login').l_email }}
              </view>
            </u-col>
            <!-- <u-col span="6">
              <view
                class="bg-purple"
                @click="googleLogin()"
              >
                Google
              </view>
            </u-col> -->
          </u-row>
        </view>
        <!-- <view class="spdiao"></view> -->
        <view class="mt20 plr10">
          <view
            class="mt20 plr10 ptb10 radius5 bgHeader"
            style="height: auto"
          >
            <view class="flex alcenter bdb_myblue mb10">
              <view class="flex alcenter flex1">
                <input
                  type="text"
                  v-model="user_string"
                  class="h40 lh40 flex1 input-uni"
                  v-if="loginActive == 1"
                  :placeholder="$t('login').p_email"
                />
                <input
                  type="digit"
                  v-model="user_string"
                  class="h40 lh40 flex1 input-uni"
                  v-else
                  :placeholder="$t('login').p_mobile"
                />
              </view>
            </view>
            <view class="mb10">
              <view class="flex bgwhite alcenter bdb_myblue">
                <input
                  type="text"
                  password=""
                  v-model="password"
                  @input="passwordInput"
                  class="h40 lh40 flex1 input-uni"
                  :placeholder="$t('login').p_pwd"
                />
              </view>
            </view>
            <view
              class="flex bgwhite alcenter bdb_myblue mb10"
              v-if="false && isShowCode"
            >
              <input
                type="text"
                v-model="code"
                class="h40 lh40 flex1 input-uni"
                :placeholder="$t('login').p_vcode"
              />
              <view
                class="ml10 plr10 white bgBlue ptb5 radius4"
                @tap="getCode"
              >
                <text v-if="!hasSend">{{ $t('login').get_code }}</text>
                <text v-else>{{ second }}s</text>
              </view>
            </view>

            <!-- <view class="mt15 flex alcenter">
						<switch value="cb" :checked="isRemember"  @tap="tapChecked" style="transform:scale(0.8);color:'#1881d2'"/>
						<text class="mbwjmm">{{$t('login').rem_pwd}}</text>
					</view> -->

            <view
              class="mt222 bgBlue radius5 ptb10 white ft14 tc mb10 lin"
              @tap="login"
              >{{ $t('login').login }}</view
            >

            <navigator
              v-if="false"
              @click="googleLogin()"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('login').google_login }}</navigator
            >

            <navigator
              url="/register"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('login').register }}</navigator
            >

            <navigator
              url="/pages/forgetPwd/forgetPwd"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('login').forget_pwd }}</navigator
            >
            <!--  #ifdef H5 -->
            <navigator
              @click="downloadApp()"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('bico.W799') }}</navigator
            >
            <!--  #endif -->
            <navigator
              @click="gocontact()"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('bico.kefu') }}</navigator
            >

            <navigator
              @click="funsItemClick(7)"
              style="
                background: #00b89700;
                color: #8495f7;
                border: 1px solid #8495f7;
                font-size: 4vw;
                border-radius: 8px;
                line-height: 2.8;
                margin-top: 6vw;
                text-align: center;
              "
              >{{ $t('bico.W518') }}</navigator
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import country from '@/common/country.js';
import {
  login,
  commonPhoneCode,
  googleLoginUri,
  googleLoginInfo,
  commonContact
} from '@/common/apiString.js';
import { myMixins } from '@/common/myMixins.js';
export default {
  mixins: [myMixins],
  data() {
    return {
      googleCode: '',
      loginActive: 1,
      user_string: '',
      password: '',
      re_password: '',
      code: '',
      array: country,
      index: 0,
      area_code: '+1',
      hasSend: false,
      second: 60,
      isRemember: false,
      verifyPwd: false,
      isShowCode: false,
      timeInterval: '',
      lang: ''
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  mounted() {
    //this.getPhone();
    this.googleCode = this.getQueryString('code');
    if (this.googleCode) {
      this.googleLoginInfo();
    }
  },
  onLoad() {
    this.$utils.setTheme(this.theme);
    uni.setNavigationBarTitle({
      title: this.$t('login').login
    });
    this.contact();
    if (uni.getStorageSync('isRemember') == 0) {
      this.isRemember = false;
    } else {
      this.isRemember = true;
      this.user_string = uni.getStorageSync('userString');
      this.password = uni.getStorageSync('userPwd');
    }
    this.lang = uni.getStorageSync('lang');
    // this.$utils.getGlobalSettting({url:'env.json'},res=>{
    // 	console.log('aaaaaaa', res);
    // 	uni.setStorageSync('socketPort',res.socket_io_port)
    // 	uni.setStorageSync('smcode',res.login_need_smscode)
    // 	this.isShowCode=res.login_need_smscode;
    // })
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    googleLoginInfo() {
      var res = this.$utils.initData(
        { url: googleLoginInfo, type: 'POST', data: { code: this.googleCode } },
        (res, msg) => {
          console.log(res + '---');
          uni.setStorageSync('token', res.token);
          // this.$utils.showLayer(this.$t('login').l_success);
          setTimeout(() => {
            this.$utils.showLayer(this.$t('login').l_success);
          }, 100);
          if (this.isRemember) {
            uni.setStorageSync('userString', this.user_string);
            uni.setStorageSync('userPwd', this.password);
          }
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/index'
            });
          }, 1500);
        }
      );
    },
    contact() {
      this.$utils.initData(
        {
          url: commonContact,
          type: 'post'
        },
        (res, msg) => {
          //uni.stopPullDownRefresh();
          this.mycontact = res;
        }
      );
    },
    gocontact() {
      // #ifdef APP
      //移动端
      plus.runtime.openURL(this.mycontact);
      // #endif
      //#ifdef H5
      //window.location.href = this.mycontact;
      this.$utils.openoutherurl(this.mycontact);
      //#endif
    },
    downloadApp() {
      this.$utils.downloadApp(this.$utils.initData);
	  console.log(123,this.$utils.initData)
    },
    googleLogin() {
      this.$utils.initData({ url: googleLoginUri, type: 'POST' }, (res, msg) => {
        this.$utils.openoutherurl(res);
      });
    },
    // 区号选择
    bindPickerChange(e) {
      this.index = e.target.value;
      this.phoneItem = this.array[this.index];
      this.area_code = this.phoneItem.code;
      this.nationality = this.phoneItem.area;
    },
    //获取手机前缀
    getPhone() {
      this.$utils.initData({ url: commonPhoneCode, type: 'POST' }, (res, msg) => {
        this.array = res;
        this.phoneItem = res[0];
      });
    },
    //路由开始
    funsItemClick(index) {
      if (index == 7) {
        uni.navigateTo({
          url: '/pages/mine/lang' //语言选择
        });
      }
    },
    // 获取验证码
    getCode() {
      if (this.timeInterval) return;
      if (this.loginActive == 0) {
        if (!this.user_string) {
          return this.$utils.showLayer(this.$t('login').p_taccount);
        }
        this.$utils.initData(
          {
            url: 'sms_send',
            type: 'POST',
            data: {
              user_string: this.user_string,
              scene: 'login',
              country_code: this.area_code,
              lang: this.lang
            }
          },
          (res, msg) => {
            // this.$utils.showLayer(msg);
            setTimeout(() => {
              this.$utils.showLayer(msg);
            }, 100);
            this.hasSend = true;
            this.timeInterval = setInterval(() => {
              if (this.second >= 1) {
                this.second--;
              } else {
                this.hasSend = false;
                clearInterval(this.timeInterval);
              }
            }, 2000);
          }
        );
      } else {
        if (!this.$utils.checkEmail(this.user_string)) {
          return this.$utils.showLayer(this.$t('login').p_email);
        }
        this.$utils.initData(
          {
            url: 'sms_mail',
            type: 'POST',
            data: { user_string: this.user_string, scene: 'login', lang: this.lang }
          },
          (res, msg) => {
            // this.$utils.showLayer(msg);
            setTimeout(() => {
              this.$utils.showLayer(msg);
            }, 100);
            this.hasSend = true;
            this.timeInterval = setInterval(() => {
              if (this.second >= 1) {
                this.second--;
              } else {
                this.hasSend = false;
                clearInterval(this.timeInterval);
              }
            }, 2000);
          }
        );
      }
    },
    // 是否选中记住密码
    tapChecked() {
      this.isRemember = !this.isRemember;
      if (this.isRemember) {
        uni.setStorageSync('isRemember', 1);
      } else {
        uni.setStorageSync('isRemember', 0);
      }
    },
    // 密码框输入判断提示
    passwordInput(e) {
      this.hasSend = false;
      if (e.target.value.length < 6) {
        this.verifyPwd = true;
      } else {
        this.verifyPwd = false;
      }
    },
    login() {
      if (this.loginActive == 1) {
        // 邮箱登录
        if (!this.$utils.checkEmail(this.user_string)) {
          return this.$utils.showLayer(this.$t('login').p_temail);
        }
      } else {
        if (!this.user_string) {
          return this.$utils.showLayer(this.$t('login').p_taccount);
        }
      }
      if (!this.password) {
        return this.$utils.showLayer(this.$t('login').p_pwd);
      }
      if (this.password.length < 6) {
        return this.$utils.showLayer(this.$t('login').p_pwderr);
      }
      // if(this.isShowCode&& !this.code){
      // 	return this.$utils.showLayer(this.$t('login').p_vcode)
      // }
      var data = {
        account: this.user_string,
        password: this.password,
        sms_code: this.code,
        lang: this.lang
      };
      if (this.loginActive == 0) {
        // 手机登录
        data.country_code = this.area_code;
      }
      this.$utils.initData({ url: login, data, type: 'POST' }, (res, msg) => {
        uni.setStorageSync('token', res.token);
        // this.$utils.showLayer(this.$t('login').l_success);
        setTimeout(() => {
          this.$utils.showLayer(this.$t('login').l_success);
        }, 100);
        if (this.isRemember) {
          uni.setStorageSync('userString', this.user_string);
          uni.setStorageSync('userPwd', this.password);
        }
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          });
        }, 1500);
      });
    }
  }
};
</script>

<style>
.vh_100 {
  padding: 0vw 0 0 0;
  background: linear-gradient(-45deg, #0d25a9, #1a31a9, #0d2296, #0f2394);
  height: 300px;
  background-size: 100%;
}
.mt20 {
  margin-top: 6vw;
  /* background-color: #fff; */
  position: relative;
  z-index: 9;
  border-radius: 15px 15px 0 0;
  height: 52px;
}
.mt222 {
  margin-top: 6vw;
}
.tc_100 {
  width: 25vw;
  height: 25vw;
  overflow: hidden;
  border: 1vw solid #ffffff00;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.wt80_100 {
  width: 25vw !important;
}

.tc_110 {
  padding-left: 22vw;
  padding-right: 20vw;
  align-items: center;
}
.ft16 {
  font-size: 4vw;
}
.plr10 {
  padding-left: 4vw;
  padding-right: 4vw;
}

.plr15 {
  padding-left: 4vw;
  padding-right: 4vw;
  width: 50vw;
}

uni-page-body {
  color: #8f9ada;
}

.pt30 {
  padding-top: 25vw;
}
.bgBlue {
  background: #2196f3;
}
.ft12 {
  font-size: 4vw;
}
* {
  font-size: 4vw;
}
.uni-picker-container .uni-picker-action {
  font-size: 4vw;
}
.span {
  font-size: 4vw;
}

.bg-purple {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.spdiao {
  height: 40px;
  background: #fff;
  border-radius: 14px 14px 0px 0px;
  position: relative;
  top: 7vw;
}
.bgBlueui {
  background: #f7f7f7;
}

.mbwjmm {
  color: #30313369;
}
</style>
